<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/*结合实际html结构--通配[合理]*/
					
				aside{
					width:235px;
					height:450px;
					background:#ababab;
					margin:20px 50px;
					
				}
			aisde.ul.sidebar li{
				width: 235px;
				height: 50px;
				/*相对定位--挂靠点/
				position:relative;
				text-aligin:center;
				line-height:50px;
				      
			}
	aside ul.sidebar li:hover{
		background:#eee;
	}
	<aside.ul.didebar div.out{
		width:400px;
		height:450px;
		border:
		position:
		left:
		display:7
	}
		</style>
	</head>
	<body>
<!--html结构,结构化标记语言[语义化标签]aside元素
aside元素 针对 左栏,广告,弹出效果...有利于SEO优化
之前版本通过div+id起名的方式[缺点:繁琐,定义起名,冗余]
-->
	<aside>
		<ul class="sidebar">
			<!--弹出框-->
			<div class="out"></div>
			<li>手机</li>
			<li>电脑</li>
			<li>家具</li>
			<li>男装</li>
			<li>女装</li>
			<li>美妆</li>
			<li>房产</li>
			<li>母婴</li>
			<li>食品</li>
		</ul>
	</aside>
	</body>
</html>